<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      div {
          /* width: 300px; */
          height: 100px;
          background: linear-gradient(135deg, transparent, transparent 45%, red, transparent 55%, transparent 100%),
                      linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%) ;
          background-size: 200px 200px;
      }
    </style>
</head>
<body>
    <div>
        
    </div>
</body>
</html>
<script>
    let data = {
        '2012-02-12' : {
            a1: '10:00:03',
            a2: '12:00:03',
            a3: '09:00:03',
        },
        '2012-04-12': {
            b1: '10:00:03',
            b2: '14:00:03',
            b3: '01:00:03',
        },
        '2012-03-12': {
            c1: '03:00:03',
            c2: '22:00:03',
            c3: '16:00:03',
        }
    }

    
    
    function timeObjConvert (timeObj) {
        let newObj = {}
        Object.keys(timeObj).forEach(function(date) {
            let timeO = timeObj[date]
            let timeArr = []
            console.log(timeO)
            Object.keys(timeO).forEach(function (timeItem) {
                timeArr.push({[timeItem]: timeO[timeItem]})
            })
            timeArr.sort(function(a, b) {
                let keya = Object.keys(a)
                let keyb = Object.keys(b)
                a = a[keya].replace(/:/g, '')
                b = b[keyb].replace(/:/g, '')
                return Number(a) - Number(b)
            })
            newObj[date] = timeArr
            console.log(timeArr, 'timearr...')
        })
       
        return newObj
    }

    console.log(timeObjConvert(data))
</script>